<template>
  <div >
    <div class="head">
      <span class="hm">黑马头条</span>
      <van-button class="sou" icon="search" round type="info">
        搜索
      </van-button>
    </div>
    <!-- 分类 -->
    <van-tabs class="fl">
      <van-tab v-for="channel in users" :title="channel.name" :key="channel.id" class="fl1">
         <articleList :channel="channel"/>
      </van-tab>
      <!-- 右侧菜单按钮显示编辑的弹框内容 -->
      <div slot="nav-right" class="nav-right" @click="isShow = true">
        <van-icon name="wap-nav" size="30" />
      </div>
    </van-tabs>
    <!-- 分类 -->
    <van-popup
      v-model="isShow"
      position="bottom"
      :style="{ height: '100%' }"
      closeable
    >
    </van-popup>
  </div>
</template>
<script>
import articleList from "../my/my2";

export default {
    components: {
     
        articleList
      },
  data() {
    return {
      users: [],
      userlist: [],
      isShow: false,
    };
  },
  created() {
    this.List();
    this.userList();
  },
  methods: {
    List() {
      this.$axios.get("/v1_0/user/channels").then((res) => {
        console.log(res.data.channels);
        this.users = res.data.channels;
      });
    },
    userList() {
      this.$axios.get("/v1_0/user/articles").then((res) => {
        console.log(res.data.results);
        this.userlist = res.data.results;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.head {
  width: 100%;
  z-index: 1;
  position: fixed;
  top: 0;
  left: 0;
  height: 45px;
  background: #3196fa;
  display: flex;
  justify-content: space-around;
  .hm {
    color: #fff;
    line-height: 45px;
    font-size: 20px;
  }
  .sou {
    width: 166px;
    height: 30px;
    background: #5babfb;
    margin-top: 7px;
  }
}
.big {
  padding: 0 15px;
  background: #ffffff;
}
.d1 {
  background: #ffffff;
  overflow: hidden;
  border-bottom: 1px solid #ccc;
  span {
    margin-right: 20px;
  }
  .p1 {
    font-size: 16px;
  }
  .p2 {
    font-size: 13px;
    color: #cfcfcf;
  }
}
.nav-right {
  position: fixed;
  right: 0px;
  background: #fff;
}
.top {
  border: 1px solid #000;
}
.fl{
    top: 45px;
//     position: fixed;
overflow: hidden;
//   left: 0;
}
.van-sticky{
    // top: 45px;
    margin-top: 45px;
    position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 2;
    
}
</style>